import React, { Component } from 'react'
import {connect} from 'react-redux'
import Header from '@/components/Header'
import { Carousel, WingBlank,Icon} from 'antd-mobile';
interface Squarestate {
    data: Array<string>;
    imgHeight: number;
}
class Main extends Component<Squarestate>{
	  state: Squarestate = {
	     data: ['1', '2', '3'],
	     imgHeight: 176,
	   }
	    componentDidMount() {
	       // simulate img loading
	       setTimeout(() => {
	         this.setState({
	           data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
	         });
	       }, 100);
	     }
    render(){
        return (
            <div>
			<Header title="首页" leftBack="false">
			   <Icon key="1" type="ellipsis" rightShow="true"></Icon>
			</Header>
			<WingBlank>
			        <Carousel
			          autoplay={false}
			          infinite
			          beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
			          afterChange={index => console.log('slide to', index)}
			        >
			          {this.state.data.map(val => (
			            <a
			              key={val}
			              href="http://www.alipay.com"
			              style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
			            >
			              <img
			                src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
			                alt=""
			                style={{ width: '100%', verticalAlign: 'top' }}
			                onLoad={() => {
			                  // fire window resize event to change height
			                  window.dispatchEvent(new Event('resize'));
			                  this.setState({ imgHeight: 'auto' });
			                }}
			              />
			            </a>
			          ))}
			        </Carousel>
			      </WingBlank>
		   </div>
        )
    }
}

export default connect()(Main)